<template>
    <div class="white-box">
        <title-more title="代理商销售奖" />
        <cell-tip show-more :datas="tipArrs" />

        <el-form ref="ruleRef" :model="ruleForm" :rules="ruleCheck" label-width="180px">
            <el-form-item label="一级代理商销售奖" prop="one_reward">
                <el-input
                    v-model.trim="ruleForm.one_reward"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    clearable
                    placeholder="请输入整数或小数(保留两位小数)"
                />
                <span class="input-icon">%</span>
            </el-form-item>
            <el-form-item label="二级代理商销售奖" prop="two_reward">
                <el-input
                    v-model.trim="ruleForm.two_reward"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    clearable
                    placeholder="请输入整数或小数(保留两位小数)"
                />
                <span class="input-icon">%</span>
            </el-form-item>
            <el-form-item label="三级代理商销售奖" prop="three_reward">
                <el-input
                    v-model.trim="ruleForm.three_reward"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    clearable
                    placeholder="请输入整数或小数(保留两位小数)"
                />
                <span class="input-icon">%</span>
            </el-form-item>
            <el-form-item label="越级推荐销售奖" prop="trans_reward">
                <el-input
                    v-model.trim="ruleForm.trans_reward"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    clearable
                    placeholder="请输入整数或小数(保留两位小数)"
                />
                <span class="input-icon">%</span>
            </el-form-item>
            <el-form-item>
                <div class="flexs" style="margin-top: 20px">
                    <el-button type="primary" :loading="form_loading" @click="submitForm(ruleRef)">确认</el-button>
                    <el-button @click="resetForm(ruleRef)">重置</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, reactive } from "vue"
import GoBack from "@components/GoBack.vue"
import TitleMore from "@components/title-more.vue"
import CellTip from "@components/cell-tip.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getInfo()
})

// 获取提示文本和已设置的比例
const tipArrs = [
    "推荐关系绑定：",
    "关系：A→B，A是B的直属上级",
    "如果A是代理商，当B成为代理商时，A就是B的推荐人，推荐关系一旦绑定，不会改变，且销售奖的推荐人只能有一个; 如果A不是代理商，当B成为代理商时，B没有推荐人。",
    "平级推荐返佣：",
    "关系：A（省级代理商）→B（省级代理商），A是B的直属上级，A是B的推荐人，A和B的代理商级别一样",
    "当B或者B的下级会员下单时，A能拿到代理商平级推荐销售奖（订单实付金额*平级推荐销售奖比例）; ",
    "越级推荐返佣：",
    "关系：A（市级代理商）→B（省级代理商），A是B的直属上级，A是B的推荐人，B的代理商级别高于A的代理商级别",
    "当B或者B的下级会员下单时，A能拿到代理商越级推荐销售奖（订单实付金额*越级推荐销售奖比例）。",
]
function getInfo() {
    proxy.$axios
        .get("agent/saleAward")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                ruleForm.one_reward = result.level_one_award || 0
                ruleForm.two_reward = result.level_two_award || 0
                ruleForm.three_reward = result.level_three_award || 0
                ruleForm.trans_reward = result.leapfrog_award || 0 // 越级返佣比例
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * 添加销售奖
 * @param {Array} ruleRef 表单规则
 * @param {Object} ruleForm  表单字段
 * @param {Object} ruleCheck  表单提示
 */
const form_loading = ref(false)
const ruleRef = ref(null)
const ruleForm = reactive({
    one_reward: "0",
    two_reward: "0",
    three_reward: "0",
    trans_reward: "0",
})
const ruleCheck = reactive({
    one_reward: [{ required: true, validator: proxy.$util.validNumOrPoint, trigger: "blur" }],
    two_reward: [{ required: true, validator: proxy.$util.validNumOrPoint, trigger: "blur" }],
    three_reward: [{ required: true, validator: proxy.$util.validNumOrPoint, trigger: "blur" }],
    trans_reward: [{ required: true, validator: proxy.$util.validNumOrPoint, trigger: "blur" }],
})
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                level_one_award: ruleForm.one_reward,
                level_two_award: ruleForm.two_reward,
                level_three_award: ruleForm.three_reward,
                leapfrog_award: ruleForm.trans_reward,
            }
            proxy.$axios
                .post("agent/saleAward", data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        proxy.$message({ message: "设置成功！", type: "success" })
                    } else {
                        proxy.$message({ message: res.data.msg, type: "error" })
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<script>
export default {
    name: "AgentSale",
}
</script>

<style lang="less" scoped>
.el-form {
    margin: 60px 0px 40px;
}
.input-icon {
    margin-left: @margin-sm;
    color: @gray-7;
}
</style>
